<template>
  <div>
      <div class="main-title">待办事项</div>
  </div>
  <div>
      <el-row justify="space-evenly" align="middle">
          <el-col class="info-card" :span="6">
              <el-card shadow="never">
                  <el-row align="middle">
                      <el-col :span="8">
                          <div>
                              <bar-icon :icon="'sell-icon'" :width="50" :height="50"/>
                          </div>
                      </el-col>
                      <el-col :span="16">
                          <div class="title">待审批销售订单</div>
                          <div class="info">审批通过后开始进行采购原料</div>
                          <el-button>去审批</el-button>
                      </el-col>
                  </el-row>
              </el-card>
          </el-col>
          <el-col class="info-card" :span="6">
              <el-card shadow="never">
                  <el-row align="middle">
                      <el-col :span="8">
                          <div>
                              <bar-icon :icon="'shopping-car'" :height="50" :width="50"/>
                          </div>
                      </el-col>
                      <el-col :span="16">
                          <div class="title">待审批采购订单</div>
                          <div class="info">审批通过后开始进行采购</div>
                          <el-button>去审批</el-button>
                      </el-col>
                  </el-row>
              </el-card>
          </el-col>
          <el-col class="info-card" :span="6">
              <el-card shadow="never">
                  <el-row align="middle">
                      <el-col :span="8">
                          <div>
                              <bar-icon :icon="'pro-order'" :height="50" :width="50"/>
                          </div>
                      </el-col>
                      <el-col :span="16">
                          <div class="title">待审批生产工单</div>
                          <div class="info">审批通过后记录生产情况</div>
                          <el-button>去审批</el-button>
                      </el-col>
                  </el-row>
              </el-card>
          </el-col>
          <el-col class="info-card" :span="6">
              <el-card shadow="never">
                  <el-row align="middle">
                      <el-col :span="8">
                          <div>
                              <bar-icon :icon="'sell-away'" :height="50" :width="50"/>
                          </div>
                      </el-col>
                      <el-col :span="16">
                          <div class="title">待审批销售出库</div>
                          <div class="info">审批通过后开始发货给客户</div>
                          <el-button>去审批</el-button>
                      </el-col>
                  </el-row>
              </el-card>
          </el-col>
      </el-row>
  </div>
</template>
<script>
import BarIcon from '../icon/BarIcon.vue'
export default {
    components:{
        BarIcon
    }
}
</script>
<style scoped>
.title{
    font-size: 16px;
    padding-bottom: 5px;
}
.info-card{
    padding-right: 10px;
}
.info {
    padding-bottom: 10px;
    font-size: 10px;
    color: #9f9f9f;
}
</style>